<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>v-for过滤与排序</title>
</head>
<body>

<div id="app">
    <ul>
<!--        <template v-for="book in filterBooks">-->
<!--            <li>书名：{{ book.name }}</li>-->
<!--            <li>作者名： {{ book.author }}</li>-->
<!--            <br/>-->
<!--        </template>-->

           <template v-for="book in sortedBooks">
            <li>书名：{{ book.name }}</li>
            <li>作者名： {{ book.author }}</li>
            <br/>
        </template>
    </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 当你不想改变原数组，而是想通过一个数组的副本来做过滤或者是排序的显示时，那么可以使用计算属性来返回过滤或者排序后的数组
     **/

   var app = new Vue({
        el: "#app",
        data: {
            books: [
                {
                    name: "Java",
                    author: "test"
                },
                {
                    name: "JavaScript",
                    author: "hello",
                },
                {
                    name: "Python",
                    author: "envy",
                },
            ]
        },
        computed:{
            filterBooks:function () {
                return this.books.filter(function (book) {
                    return book.name.match(/Java/);
                })
            },
            sortedBooks:function () {
                return this.books.sort(function (a, b) {
                    return a.name.length < b.name.length;
                })
            }
        }
    });

   /**
    * 上例是把书中包含Java关键词的数据过滤出来，计算属性filterBooks依赖books,但是并不会修改books。
    * 实现排序也是类似的，如在此基础上新加一个计算属性sortedBooks用于排序，规则是依据书的长度由长到短进行排序。
    * **/

</script>
</body>
</html>
